<template>
  <div class="wms-store-test-page">
    <ElCard header="WMS状态管理测试">
      <ElSpace direction="vertical" size="large" style="width: 100%">
        <!-- 操作按钮 -->
        <ElSpace wrap>
          <ElButton type="primary" @click="initAllData" :loading="loading">
            初始化所有数据
          </ElButton>
          <ElButton @click="refreshWarehouse" :loading="warehouseLoading">
            刷新仓库数据
          </ElButton>
          <ElButton @click="refreshArea" :loading="areaLoading">
            刷新库区数据
          </ElButton>
          <ElButton @click="refreshMerchant" :loading="merchantLoading">
            刷新商户数据
          </ElButton>
          <ElButton @click="refreshCategory" :loading="categoryLoading">
            刷新分类数据
          </ElButton>
          <ElButton @click="refreshBrand" :loading="brandLoading">
            刷新品牌数据
          </ElButton>
        </ElSpace>

        <!-- 数据展示 -->
        <ElRow :gutter="16">
          <!-- 仓库数据 -->
          <ElCol :span="12">
            <ElCard header="仓库数据" shadow="never">
              <div class="data-info">
                <p>总数量: {{ warehouseList.length }}</p>
                <p>启用数量: {{ getActiveWarehouses.length }}</p>
                <ElDivider />
                <div v-if="warehouseList.length > 0">
                  <div
                    v-for="warehouse in warehouseList.slice(0, 3)"
                    :key="warehouse.id"
                    class="data-item"
                  >
                    <ElTag>{{ warehouse.warehouseName }}</ElTag>
                    <span class="data-code">{{ warehouse.warehouseCode }}</span>
                  </div>
                  <div v-if="warehouseList.length > 3" class="more-info">
                    还有 {{ warehouseList.length - 3 }} 个仓库...
                  </div>
                </div>
                <ElEmpty v-else description="暂无数据" :image-size="60" />
              </div>
            </ElCard>
          </ElCol>

          <!-- 库区数据 -->
          <ElCol :span="12">
            <ElCard header="库区数据" shadow="never">
              <div class="data-info">
                <p>总数量: {{ areaList.length }}</p>
                <p>启用数量: {{ getActiveAreas.length }}</p>
                <ElDivider />
                <div v-if="areaList.length > 0">
                  <div
                    v-for="area in areaList.slice(0, 3)"
                    :key="area.id"
                    class="data-item"
                  >
                    <ElTag type="success">{{ area.areaName }}</ElTag>
                    <span class="data-code">{{ area.areaCode }}</span>
                  </div>
                  <div v-if="areaList.length > 3" class="more-info">
                    还有 {{ areaList.length - 3 }} 个库区...
                  </div>
                </div>
                <ElEmpty v-else description="暂无数据" :image-size="60" />
              </div>
            </ElCard>
          </ElCol>
        </ElRow>

        <ElRow :gutter="16">
          <!-- 商户数据 -->
          <ElCol :span="8">
            <ElCard header="商户数据" shadow="never">
              <div class="data-info">
                <p>总数量: {{ merchantList.length }}</p>
                <p>启用数量: {{ getActiveMerchants.length }}</p>
                <ElDivider />
                <div v-if="merchantList.length > 0">
                  <div
                    v-for="merchant in merchantList.slice(0, 2)"
                    :key="merchant.id"
                    class="data-item"
                  >
                    <ElTag type="warning">{{ merchant.merchantName }}</ElTag>
                    <span class="data-code">{{ merchant.merchantCode }}</span>
                  </div>
                  <div v-if="merchantList.length > 2" class="more-info">
                    还有 {{ merchantList.length - 2 }} 个商户...
                  </div>
                </div>
                <ElEmpty v-else description="暂无数据" :image-size="60" />
              </div>
            </ElCard>
          </ElCol>

          <!-- 商品分类数据 -->
          <ElCol :span="8">
            <ElCard header="商品分类数据" shadow="never">
              <div class="data-info">
                <p>总数量: {{ itemCategoryList.length }}</p>
                <p>树形数量: {{ itemCategoryTreeList.length }}</p>
                <ElDivider />
                <div v-if="itemCategoryList.length > 0">
                  <div
                    v-for="category in itemCategoryList.slice(0, 2)"
                    :key="category.id"
                    class="data-item"
                  >
                    <ElTag type="info">{{ category.categoryName }}</ElTag>
                    <span class="data-code">{{ category.categoryCode }}</span>
                  </div>
                  <div v-if="itemCategoryList.length > 2" class="more-info">
                    还有 {{ itemCategoryList.length - 2 }} 个分类...
                  </div>
                </div>
                <ElEmpty v-else description="暂无数据" :image-size="60" />
              </div>
            </ElCard>
          </ElCol>

          <!-- 商品品牌数据 -->
          <ElCol :span="8">
            <ElCard header="商品品牌数据" shadow="never">
              <div class="data-info">
                <p>总数量: {{ itemBrandList.length }}</p>
                <p>启用数量: {{ getActiveItemBrands.length }}</p>
                <ElDivider />
                <div v-if="itemBrandList.length > 0">
                  <div
                    v-for="brand in itemBrandList.slice(0, 2)"
                    :key="brand.id"
                    class="data-item"
                  >
                    <ElTag type="danger">{{ brand.brandName }}</ElTag>
                    <span class="data-code">{{ brand.brandCode }}</span>
                  </div>
                  <div v-if="itemBrandList.length > 2" class="more-info">
                    还有 {{ itemBrandList.length - 2 }} 个品牌...
                  </div>
                </div>
                <ElEmpty v-else description="暂无数据" :image-size="60" />
              </div>
            </ElCard>
          </ElCol>
        </ElRow>

        <!-- 状态信息 -->
        <ElCard header="状态信息" shadow="never">
          <ElDescriptions :column="3" border>
            <ElDescriptionsItem label="仓库映射"
              >{{ warehouseMap.size }} 个</ElDescriptionsItem
            >
            <ElDescriptionsItem label="库区映射"
              >{{ areaMap.size }} 个</ElDescriptionsItem
            >
            <ElDescriptionsItem label="商户映射"
              >{{ merchantMap.size }} 个</ElDescriptionsItem
            >
            <ElDescriptionsItem label="分类映射"
              >{{ itemCategoryMap.size }} 个</ElDescriptionsItem
            >
            <ElDescriptionsItem label="品牌映射"
              >{{ itemBrandMap.size }} 个</ElDescriptionsItem
            >
            <ElDescriptionsItem label="库区分组"
              >{{ areasByWarehouse.size }} 个仓库</ElDescriptionsItem
            >
          </ElDescriptions>
        </ElCard>
      </ElSpace>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useWmsStore } from "@/store/modules/wms";
import { ElMessage } from "element-plus";

defineOptions({ name: "WmsStoreTest" });

// 使用WMS状态管理
const wmsStore = useWmsStore();

// 解构状态和方法
const {
  // 状态
  warehouseList,
  warehouseMap,
  areaList,
  areaMap,
  areasByWarehouse,
  merchantList,
  merchantMap,
  itemCategoryList,
  itemCategoryTreeList,
  itemCategoryMap,
  itemBrandList,
  itemBrandMap,

  // 计算属性
  getActiveWarehouses,
  getActiveAreas,
  getActiveMerchants,
  getActiveItemBrands,

  // 方法
  initAllBasicData,
  refreshBasicData,
} = wmsStore;

// 加载状态
const loading = ref(false);
const warehouseLoading = ref(false);
const areaLoading = ref(false);
const merchantLoading = ref(false);
const categoryLoading = ref(false);
const brandLoading = ref(false);

// 初始化所有数据
const initAllData = async () => {
  loading.value = true;
  try {
    await initAllBasicData();
    ElMessage.success("初始化数据成功");
  } catch (_error) {
    ElMessage.error("初始化数据失败");
    console.error("初始化数据失败:", _error);
  } finally {
    loading.value = false;
  }
};

// 刷新仓库数据
const refreshWarehouse = async () => {
  warehouseLoading.value = true;
  try {
    await refreshBasicData("warehouse");
    ElMessage.success("刷新仓库数据成功");
  } catch (_error) {
    ElMessage.error("刷新仓库数据失败");
  } finally {
    warehouseLoading.value = false;
  }
};

// 刷新库区数据
const refreshArea = async () => {
  areaLoading.value = true;
  try {
    await refreshBasicData("area");
    ElMessage.success("刷新库区数据成功");
  } catch (_error) {
    ElMessage.error("刷新库区数据失败");
  } finally {
    areaLoading.value = false;
  }
};

// 刷新商户数据
const refreshMerchant = async () => {
  merchantLoading.value = true;
  try {
    await refreshBasicData("merchant");
    ElMessage.success("刷新商户数据成功");
  } catch (_error) {
    ElMessage.error("刷新商户数据失败");
  } finally {
    merchantLoading.value = false;
  }
};

// 刷新分类数据
const refreshCategory = async () => {
  categoryLoading.value = true;
  try {
    await refreshBasicData("category");
    ElMessage.success("刷新分类数据成功");
  } catch (_error) {
    ElMessage.error("刷新分类数据失败");
  } finally {
    categoryLoading.value = false;
  }
};

// 刷新品牌数据
const refreshBrand = async () => {
  brandLoading.value = true;
  try {
    await refreshBasicData("brand");
    ElMessage.success("刷新品牌数据成功");
  } catch (_error) {
    ElMessage.error("刷新品牌数据失败");
  } finally {
    brandLoading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.wms-store-test-page {
  padding: 20px;

  .data-info {
    min-height: 200px;

    .data-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;

      .data-code {
        font-size: 12px;
        color: var(--el-text-color-regular);
      }
    }

    .more-info {
      font-size: 12px;
      color: var(--el-text-color-placeholder);
      text-align: center;
      margin-top: 8px;
    }
  }
}
</style>
